﻿<!DOCTYPE html>
<html lang="en">
<nav th:replace="shop/include::shopHeader"></nav>
<body class="shop_grid_page">
<!--[if lt IE 8]>
      <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]--> 
<!-- end mobile menu -->
  <nav th:replace="shop/include::shopTop"></nav>
  <!-- Main Container -->
  <div class="main-container col2-left-layout">
    <div class="container">
      <div class="row">
        <div class="col-main col-sm-9 col-xs-12 col-sm-push-3" >
          <div class="shop-inner">
            <div class="page-title">
              <h2 th:text="${category.title}"></h2>
            </div>
            <div class="product-grid-area">
              <ul class="products-grid">
                <li class="item col-lg-4 col-md-4 col-sm-6 col-xs-6 " th:each="goods:${goodsList}">
                  <div class="product-item">
                    <div class="item-inner">
                      <div class="product-thumbnail">
                        <div class="pr-img-area"> 
                       	  <a th:title="${goods.subject}" th:href="${'/shop/detail/'+ goods.id}">
	                          <figure>
	                          	<img class="first-img" th:src="${'/files/' + goods.thumbnailImage}" alt="">
	                          	<img class="hover-img" th:src="${'/files/' + goods.thumbnailImage}" alt="">
	                          </figure>
                          </a>
                          <button type="button" class="add-to-cart-mt" th:onclick="'javascript:addCart(\''+${goods.id}+'\')'">
	                      	<i class="fa fa-shopping-cart"></i>
	                      	<span>加入购物车</span>
	                      </button>
                        </div>
                      </div>
                      <div class="item-info">
	                    <div class="info-inner">
	                      <div class="item-title"> <a th:title="${goods.subject}" th:href="${ '/shop/detail/' +goods.id}" th:text="${goods.title}"></a> </div>
	                      <div class="item-content">
	                        <div class="item-price">
	                          <div class="price-box"> 
	                          	<span class="regular-price"> 
	                          		<span class="price" th:text="${'￥'+ #numbers.formatDecimal(goods.salePrice * 0.01, 1, 2) }">￥125.00</span>
	                          	</span>
	                          	<span class="old-price" th:if="${goods.marketPrice > 0}"  th:text="${'￥'+ #numbers.formatDecimal(goods.marketPrice * 0.01, 1, 2) }"> $359.99 </span>
	                          </div>
	                        </div>
	                      </div>
	                    </div>
                     </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            
            <div class="pagination-area ">
             <!--
              <ul>
                <li><a class="active" href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#"><i class="fa fa-angle-right"></i></a></li>
              </ul>
               -->
            </div>
          </div>
        </div>
        <aside class="sidebar col-sm-3 col-xs-12 col-sm-pull-9">
          <div class="block category-sidebar">
            <div class="sidebar-title">
              <h3>Categories</h3>
            </div>
            <ul class="product-categories">
              <li class="cat-item current-cat cat-parent"><a href= "shop_grid.html">Women</a>
                <ul class="children">
                  <li class="cat-item cat-parent"><a href="shop_grid.html"><i class="fa fa-angle-right"></i>&nbsp; Accessories</a>
                    <ul class="children">
                      <li class="cat-item"><a href="shop_grid.html"><i class="fa fa-angle-right"></i>&nbsp; Dresses</a></li>
                      <li class="cat-item cat-parent"><a href="shop_grid.html"><i class="fa fa-angle-right"></i>&nbsp; Handbags</a>
                        <ul style="display: none;" class="children">
                          <li class="cat-item"><a href="shop_grid.html"><i class="fa fa-angle-right"></i>&nbsp; Beaded Handbags</a></li>
                          <li class="cat-item"><a href="shop_grid.html"><i class="fa fa-angle-right"></i>&nbsp; Sling bag</a></li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  <li class="cat-item cat-parent"><a href="shop_grid.html"><i class="fa fa-angle-right"></i>&nbsp; Handbags</a>
                    <ul class="children">
                      <li class="cat-item"><a href="shop_grid.html"><i class="fa fa-angle-right"></i>&nbsp; backpack</a></li>
                      <li class="cat-item"><a href="shop_grid.html"><i class="fa fa-angle-right"></i>&nbsp; Beaded Handbags</a></li>
                      <li class="cat-item"><a href="shop_grid.html"><i class="fa fa-angle-right"></i>&nbsp; Fabric Handbags</a></li>
                      <li class="cat-item"><a href="shop_grid.html"><i class="fa fa-angle-right"></i>&nbsp; Sling bag</a></li>
                    </ul>
                  </li>
                  <li class="cat-item"><a href="shop_grid.html"><i class="fa fa-angle-right"></i>&nbsp; Jewellery</a> </li>
                  <li class="cat-item"><a href="shop_grid.html"><i class="fa fa-angle-right"></i>&nbsp; Swimwear</a> </li>
                </ul>
              </li>
              <li class="cat-item cat-parent"><a href="shop_grid.html">Men</a>
                <ul class="children">
                  <li class="cat-item cat-parent"><a href="shop_grid.html"><i class="fa fa-angle-right"></i>&nbsp; Dresses</a>
                    <ul class="children">
                      <li class="cat-item"><a href="shop_grid.html"><i class="fa fa-angle-right"></i>&nbsp; Casual</a></li>
                      <li class="cat-item"><a href="shop_grid.html"><i class="fa fa-angle-right"></i>&nbsp; Designer</a></li>
                      <li class="cat-item"><a href="shop_grid.html"><i class="fa fa-angle-right"></i>&nbsp; Evening</a></li>
                      <li class="cat-item"><a href="shop_grid.html"><i class="fa fa-angle-right"></i>&nbsp; Hoodies</a></li>
                    </ul>
                  </li>
                  <li class="cat-item"><a href="shop_grid.html"><i class="fa fa-angle-right"></i>&nbsp; Jackets</a> </li>
                  <li class="cat-item"><a href="shop_grid.html"><i class="fa fa-angle-right"></i>&nbsp; Shoes</a> </li>
                </ul>
              </li>
              <li class="cat-item"><a href="shop_grid.html">Electronics</a></li>
              <li class="cat-item"><a href="shop_grid.html">Furniture</a></li>
              <li class="cat-item"><a href="shop_grid.html">KItchen</a></li>
            </ul>
          </div>
          <div class="block shop-by-side">
            <div class="block-content">
              <div class="layered-Category">
                <h2 class="saider-bar-title">选择分类</h2>
                <div class="layered-content">
                  <ul class="check-box-list">
                    <li th:each="category:${categoryList}">
                      <label><a th:href="${'/shop/category/'+category.id}"><span class="button"></span><span th:text="${category.title}"></span></a></label>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </aside>
      </div>
    </div>
  </div>
  <!-- Main Container End --> 
  <!-- Footer -->
  <nav th:replace="shop/include::shopFooter"></nav>
<!-- End Footer --> 
<!-- JS --> 

<!-- jquery js --> 
<script type="text/javascript" src="/shop/js/jquery.min.js"></script> 

<!-- bootstrap js --> 
<script type="text/javascript" src="/shop/js/bootstrap.min.js"></script> 

<!-- owl.carousel.min js --> 
<script type="text/javascript" src="/shop/js/owl.carousel.min.js"></script> 

<!-- bxslider js --> 
<script type="text/javascript" src="/shop/js/jquery.bxslider.js"></script> 

<!--jquery-slider js --> 
<script type="text/javascript" src="/shop/js/slider.js"></script> 

<!-- megamenu js --> 
<script type="text/javascript" src="/shop/js/megamenu.js"></script> 
<script type="text/javascript">
        /* <![CDATA[ */   
        var mega_menu = '0';
        
        /* ]]> */
        </script> 

<!-- jquery.mobile-menu js --> 
<script type="text/javascript" src="/shop/js/mobile-menu.js"></script> 
<!--jquery-ui.min js --> 
<script type="text/javascript" src="/shop/js/jquery-ui.js"></script> 

<!-- main js --> 
<script type="text/javascript" src="/shop/js/main.js"></script>
<script type="text/javascript" src="/js/plugins/layer/layer.js"></script>
<script type="text/javascript">
function addCart(id){
	$.ajax({
		type : "POST",
		url : "/shop/shopping_cart/add",
		data : JSON.stringify({"goodsId":id}),// 你的formid
		contentType:"application/json",
        dataType : "json",
		success : function(r) {
			console.log(r);
			if (r.code == 0) {
				layer.msg("购物车加入成功");
				loadShoppingCartNum();
			} else {
				layer.msg(r.msg);
			}
		}
	});
}
function loadShoppingCartNum(){
	$.ajax({
		type : "GET",
		url : "/shop/shopping_cart/total_number",
		data : {},// 你的formid
		contentType:"application/json",
        dataType : "json",
		success : function(r) {
			console.log(r);
			if (r.code == 0) {
				$("#shoppingCartNum").html("共"+r.msg+"件商品");
			} else {
				layer.msg(r.msg);
			}
		}
	});
}
loadShoppingCartNum();
</script>
</body>
</html>
